<template>
  <el-container>
    <el-main>
      <el-tabs v-model="activeName" @tab-click="handleClick" lazy="true">
        <!-- //这里name期望是个字符串，所以我们拼接 -->
        <el-tab-pane
          :label="item"
          :name="index + ''"
          v-for="(item,index) in tabs_data"
          :key="index"
        >
          <div>
            <!-- 子组件 传入不同值，获取不同板块的数据 -->
            <HomeWalls v-if="activeName === index + ''" :activeName="index"></HomeWalls>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <el-aside width="200px">
      <!-- 登录了 -->
      <LoginAside v-if="isAside"></LoginAside>
      <!-- 未登录 -->
      <UnloginAside v-else></UnloginAside>
      <div class="footer">
        <div class="footer-item">
          <span>qq交流群群号:</span>
          <span>1014584988</span>
        </div>
        <div class="footer-item">
          <span>关于我们:</span>
          <span>由武职@chen推出</span>
        </div>
        <div class="footer-item">
          <span>宗旨:</span>
          <span>打造健康向上的聊天平台</span>
        </div>
        <div class="footer-item">
          <span>版权:</span>
          <span>归武职@chen所有</span>
        </div>
        <div class="footer-item">
          <span>备案号:</span>
          <span>暂无</span>
        </div>
      </div>
    </el-aside>
  </el-container>
</template>

<script>
// 引入子组件
import HomeWalls from "@/views/home/home_walls/index.vue";
import LoginAside from "@/views/home/loginAside/index.vue";
import UnloginAside from "@/views/home/unloginAside/index.vue";
export default {
  data() {
    return {
      // 控制标签页的展示
      activeName: "0",
      // 控制侧边栏的展示
      isAside: localStorage.getItem("WALLTOKEN"),
      tabs_data: ["综合", "一起玩", "每日分享", "其他"],
    };
  },
  mounted() {
    // 退出登录的全局事件总线回调
    this.$bus.$on("isLogin", () => {
      this.isAside = "";
    });
  },
  methods: {
    // 切换不同的板块
    handleClick(tab, event) {},
  },
  components: {
    LoginAside,
    UnloginAside,
    HomeWalls,
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tabs__item.is-active {
  color: #008c8c;
}
/deep/.el-tabs__item:hover {
  color: #008c8c;
}
/deep/.el-tabs__active-bar {
  background: #008c8c;
}
.el-container {
  width: 1000px;
  padding: 0 16px;
  margin: 10px auto;
  .el-main {
    border-radius: 5px;
    width: 690px;
    margin-right: 10px;
    background: #fff;
  }
  .el-aside {
    width: 200px;
  }
  .footer {
    .footer-item {
      font-size: 12px;
      padding: 5px;
    }
  }
}
</style>